<template>
    <div :id="id"
         :style="{width, height}"></div>
</template>

<script>
    import * as echarts from 'echarts'

    export default {
        props: {
            id: {
                type: String,
                default: 'echarts'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '100%'
            },
            subcaption: {
                type: String,
            },
            xAxisMin: {
                type: Number,
                default: 0
            },
            xAxisMax: {
                type: Number,
                default: 0
            },
            xAxisAxisLabelShow: {
                type: Boolean,
                default: true
            },
            backgroundShow: {
                //默认为跟页面大背景一样
                type: String,
                default: ''
            },
            innerBackgroundShow: {
                type: Boolean,
                default: false
            },
            splitNumber: {
                type: Number,
                default: 3
            },
            speedData: {
                type: Array
            },
            // 放大/缩小
            visible: {
                type: Boolean,
            },
            grid: {
                type: Object,
                default:function(){
                    return {x: '5%', x2: '2%', y: '5%', y2: '5%'}
                },
            },
        },
        mounted() {
            this.init()
        },
        watch: {
            visible() {
                if (this.charts) {
                    this.charts.resize();
                }
            },
        },
        data() {
            return {
                yMax: 400,
                yMin: 200
            }
        },
        methods: {
            init() {
                this.charts = echarts.init(document.getElementById(this.id))

                var _this = this;
                this.charts.setOption({
                    backgroundColor: this.backgroundShow,
                    grid: this.grid,
                    legend: {
                        show: false,
                        x: "right",
                        y: 'top',
                        padding: [25, 0, 0, 20],
                        orient: 'vertical'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        // axisPointer: {
                        //     type: 'shadow',
                        //     shadowStyle: {
                        //         color: 'rgba(0, 0, 0, 0.2)',
                        //     }
                        // },
                        backgroundColor: 'rgba(255, 255, 255, 0.8)',
                        formatter: function (params) {
                            const param1 = params[0];
                            var date = new Date(param1.value[0]);
                            var month = date.getMonth() + 1;
                            var day = date.getDate();
                            var hour = date.getHours();
                            var minutes = date.getMinutes();
                            return date.getFullYear() + '/' + (month>9 ? month : '0'+month) + '/' + (day>9 ? day : '0'+day) + ' ' +
                                (hour>9 ? hour : '0'+hour) + ':' + (minutes>9 ? minutes : '0'+minutes) + '<br>' +
                                param1.marker + param1.seriesName + ' : ' + param1.value[1];
                        },
                    },
                    xAxis: [{
                        type: 'time',
                        // interval: 86400000,
                        axisLabel: {
                            formatter: function (value, index) {
                                // 格式化成月/日，只在第一个刻度显示年份
                                var date = new Date(value);
                                var month = date.getMonth() + 1;
                                var day = date.getDate();
                                var texts = [month>9 ? month.toString() : '0'+month, day>9 ? day.toString() : '0'+day];
                                return texts.join('/');
                            },
                            showMinLabel: true,
                            showMaxLabel: true,
                            show: this.xAxisAxisLabelShow
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                            }
                        },
                        axisTick: {
                            show: true,
                            inside: true,
                            length: 8
                        },
                        minorTick: {
                            show: true,
                            splitNumber: 8
                        },
                        splitNumber: this.splitNumber,
                        min: this.xAxisMin,
                        max: this.xAxisMax
                    },{
                        type: 'time',
                        position: 'top',
                        axisLine: {
                            onZero: false
                        },
                        axisPointer: {
                            show:false
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                            }
                        },
                        axisTick: {
                            show: true,
                            inside: true,
                            length: 8
                        },
                        minorTick: {
                            show: true,
                            splitNumber: 8
                        },
                        axisLabel: {
                            show: false
                        },
                        splitNumber: this.splitNumber,
                        min: this.xAxisMin,
                        max: this.xAxisMax
                    }],
                    yAxis:[
                        {
                            type: 'value',
                            name: 'Speed (km/s)',
                            nameLocation: 'middle',
                            nameGap: 45,
                            splitArea: {
                                show: this.innerBackgroundShow,
                                areaStyle: {
                                    color: 'white'
                                }
                            },
                            nameTextStyle: {
                                fontFamily: 'Microsoft YaHei',
                                fontSize: '12',
                                color: 'purple'
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                }
                            },
                            axisLabel: {
                                showMinLabel: true,
                                showMaxLabel: true,
                            },
                            axisTick: {
                                show: true,
                                inside: true,
                                color: '#000000'
                            },
                            axisLine: {
                                show: true
                            },
                            min: _this.yMin,
                            max: function (value) {
                                if (value.max > 400) {
                                    var num = (value.max * 1.3) / 100;
                                    _this.yMax = Math.ceil(num) * 100;
                                    return _this.yMax;
                                } else {
                                    return _this.yMax;
                                }
                            },
                            splitNumber: 4,
                            minInterval: 100,
                            maxInterval: 500,
                        },
                        {
                            type: 'value',
                            position: 'right',
                            axisTick: {
                                show: true,
                                inside: true,
                                color: '#000000'
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                }
                            },
                            axisLabel: {
                                show: false
                            },
                            axisLine: {
                                show: true
                            },
                            min: function (value) {
                                return _this.yMin;
                            },
                            max: function (value) {
                                return _this.yMax;
                            },
                            splitNumber: 4,
                            minInterval: 100,
                            maxInterval: 500,
                        }
                    ],
                    series:
                        {
                            name: 'Speed',
                            type: 'scatter',
                            symbol: 'circle',
                            symbolSize: 1,
                            showSymbol: false,
                            showAllSymbol: true,
                            lineStyle: {
                                color: 'purple',
                                width: 1,
                            },
                            itemStyle: {
                                color: 'purple'
                            },
                            data: this.speedData,
                        },
                })
            }
        }
    }
</script>

<style scoped>

</style>